<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="webjars/Semantic-UI/2.4.1/semantic.css" rel="stylesheet">
    <link href="webjars/datatables/1.10.20/css/dataTables.semanticui.css" rel="stylesheet">
    <link href="webjars/datatables-buttons/1.6.1/css/buttons.semanticui.css" rel="stylesheet">
    <link href="css/responsive.semanticui.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <script src="webjars/jquery/3.4.1/jquery.min.js"></script>
    <script src="webjars/Semantic-UI/2.4.1/semantic.js"></script>
    <script src="webjars/datatables/1.10.20/js/jquery.dataTables.js"></script>
    <script src="webjars/datatables/1.10.20/js/dataTables.semanticui.js"></script>
    <script src="webjars/datatables-buttons/1.6.1/js/dataTables.buttons.js"></script>
    <script src="webjars/datatables-buttons/1.6.1/js/buttons.semanticui.js"></script>
    <script src="webjars/datatables-responsive/2.2.3/js/dataTables.responsive.js"></script>
    <script src="webjars/datatables-responsive/2.2.3/js/responsive.semanticui.js"></script>
    <script src="js/main.js"></script>
    <title>Профиль</title>
</head>
<body>
<div class="ui container">
    <div th:insert="~{header :: header}"></div>
    <div class="ui segment">
        <h3 class="ui header">Обо мне</h3>
        <div class="ui form">
            <div class="field">
                <label>Логин</label>
                <input id="inputUserLogin" type="text" name="login" placeholder="Введите логин">
            </div>
            <div class="field">
                <label>Пароль</label>
                <input id="inputUserPassword" type="password" name="password" placeholder="Введите пароль">
            </div>
            <div class="field">
                <label>Имя</label>
                <input id="inputUserName" type="text" name="name" placeholder="Введите имя">
            </div>
            <button id="btnSaveUserInfo" class="ui button" onclick="saveUserInfo()">Сохранить</button>
        </div>
    </div>
    <div class="ui segment">
        <h3 class="ui header">Мои питомцы</h3>
        <table id="table" class="ui celled table responsive nowrap unstackable" width="100%">
            <thead>
            <tr>
                <th>id</th>
                <th>Кличка</th>
                <th>Тип питомца</th>
                <th></th>
            </tr>
            </thead>
        </table>
    </div>
    <div th:insert="~{footer :: footer}"></div>
</div>
<div id="addModal" class="ui modal">
    <div class="header">Добавить питомца</div>
    <div class="content">
        <div class="ui form">
            <div class="field">
                <label>Кличка</label>
                <input id="nameAddInput" class="nameInput" type="text" name="name" placeholder="Введите кличку питомца">
            </div>
            <div class="field">
                <label>Тип питомца</label>
                <input id="typeAddInput" class="typeInput" type="text" name="type" placeholder="Что у вас за питомец?">
            </div>
        </div>
    </div>
    <div class="actions">
        <button id="btnAdd" class="ui submit button">OK</button>
        <div class="ui cancel button">Отмена</div>
    </div>
</div>
<div id="editModal" class="ui modal">
    <div class="header">Редактировать информацию о питомце</div>
    <div class="content">
        <div class="ui form">
            <input id="nameIdUpdate" type="hidden" name="id">
            <div class="field">
                <label>Кличка</label>
                <input id="nameUpdateInput" class="nameInput" type="text" name="name" placeholder="Введите кличку питомца">
            </div>
            <div class="field">
                <label>Тип питомца</label>
                <input id="typeUpdateInput" class="typeInput" type="text" name="type" placeholder="Что у вас за питомец?">
            </div>
        </div>
    </div>
    <div class="actions">
        <button id="btnSave" class="ui button">OK</button>
        <div class="ui cancel button">Отмена</div>
    </div>
</div>
<script>
    $(document).ready(function() {
        var currentUserId;
        loadUserInfo();

        var table = $("#table").DataTable({
            "searching": false,
            ajax: {
                url: "user/animals",
                type: "GET",
                dataSrc: ""
            },
            columns: [
                {"data": "id"},
                {"data": "name"},
                {"data": "type"},
                {
                    "data": "",
                    "render": function (data, type, row) {
                        return  '<button class="ui button" onclick=deleteEntity("animal/'+row.id+'",$("#table"));>' +
                                    '<i class="ui close icon"></i>Удалить' +
                                '</button>' +
                                '<button class="ui button" onclick=\'showModal('+row.id+',\"'+row.name+'\",\"'+row.type+'\");\'>' +
                                    '<i class="ui cogs icon"></i>Ред.' +
                                '</button>';
                    }
                }
            ],
            columnDefs: [
                {"targets": [0], "visible": false, "searchable": false},
            ],
            lengthChange: false
        });
        new $.fn.dataTable.Buttons(table, [{
                text: '<i class="plus icon"></i>Добавить',
                action: function () {
                    $("#addModal").modal('show');
                }
            }
        ]);

        table.buttons().container()
            .appendTo($('div.eight.column:eq(0)', table.table().container()));

        $("#btnAdd").on("click", function () {
            var name = $("#nameAddInput").val();
            var type = $("#typeAddInput").val();
            if (name !== "") {
                var data = {
                    "name": name,
                    "type": type,
                };
                createEntity("animal", data, $("#table"));
                $("#addModal").modal('hide');
                $("#nameAddInput").val("");
                $("#typeAddInput").val("");
            }
        });

        $("#btnSave").on("click", function () {
            var id = $("#nameIdUpdate").val();
            var name = $("#nameUpdateInput").val();
            var type = $("#typeUpdateInput").val();

            if (name !== "") {
                var data = {
                    "id": id,
                    "name": name,
                    "type": type
                };
                updateEntity("animal", data, $("#table"));
                $("#editModal").modal('hide');
            }
        });
    });

    function showModal(id, name, type) {
        $("#nameIdUpdate").val(id);
        $("#nameUpdateInput").val(name);
        $("#typeUpdateInput").val(type);

        $("#editModal").modal('show');
    }

    function loadUserInfo() {
        $.ajax({
            url: "user/current",
            type: "GET",
            success: function(data) {
                currentUserId = data.id;
                $("#inputUserLogin").val(data.login);
                $("#inputUserName").val(data.name);
            }
        });
    }

    function saveUserInfo() {
        var data = {
            "id": currentUserId,
            "login": $("#inputUserLogin").val(),
            "password": $("#inputUserPassword").val(),
            "name": $("#inputUserName").val()
        }

        $.ajax({
            url: "user",
            type: "PUT",
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function() {
                loadUserInfo();
                $("#inputUserPassword").val("")
            }
        });
    }
</script>
</body>
</html>